import React, { Component } from 'react'
import { connect } from 'react-redux'
import { List,Button } from 'antd'
import { setRead, delMsg } from '../../store/actionCreators'
class MsgList extends Component {
  render() {
    return (
      <List
        header={<h2>消息中心</h2>}
        bordered
        dataSource={this.props.msgList}
        renderItem={(item,index) => (
          <List.Item
          actions={
            [<Button 
                onClick = {
                  ()=> {
                    this.props.setRead(index)
                  }
                }
                disabled={item.isRead} type="primary" key="read">点击已读</Button>,
             <Button danger 
               onClick = {
                 () => {
                   this.props.delMsg(index)
                 }
               }
               key="del">删除</Button>]}
          >
            {item.content}

          </List.Item>
        )}
      />
    )
  }
}
// 将store中的state与组件props进行绑定
const mapStateToProps = (state) => {
  return {
    msgList:state.msgLists
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    setRead: (index) => {
      dispatch(setRead(index))
    },
    delMsg: (index) => {
      dispatch(delMsg(index))
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(MsgList)